<template>
  <div>
    <div class="table-operator">
      <a-button v-action:add type="primary" icon="plus" @click="handleShiftAdd">{{ $t('button.add') }}</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="false"
      :showPagination="false"
    >
      <span slot="times" slot-scope="text, record">{{ record.startTime }} - {{ record.endTime }}</span>
      <div slot="planTimeList" slot-scope="text">
        <div v-for="item in text" :key="item.id">{{ item.startTime }} - {{ item.endTime }} {{ item.name }}</div>
      </div>
      <span slot="action" slot-scope="text, record" class="actionsList">
        <a v-action:edit @click="handleShiftEdit(record)">{{ $t('common.edit') }}</a>
        <a-divider v-action:delete type="vertical" />
        <a-popconfirm @confirm="handleShiftDelOk(record)">
          <div slot="title">确认需要删除该班次吗？<br />删除后人员工作时间配置的该班次将同步删除！</div>
          <a class="link-danger" v-action:delete>{{ $t('common.delete') }}</a>
        </a-popconfirm>
      </span>
    </s-table>
    <shift-form ref="shiftForm" :shifts="shifts" @ok="handleShiftAddOk" />
    <!-- <plan-type-form ref="planTypeForm" /> -->
  </div>
</template>

<script>
import { STable } from '@/components'
import { layoutMixin } from '@/utils/mixin'
import ShiftForm from './ShiftForm'
// import PlanTypeForm from './PlanTypeForm';
import { getShifts, deleteShift } from '@/api/shift'

export default {
  name: 'ShiftSetting',
  mixins: [layoutMixin],
  components: {
    STable,
    ShiftForm
    // PlanTypeForm
  },
  data () {
    return {
      shifts: [],
      loadData: () => {
        const { id } = this.$store.state.user.info
        return getShifts({ userId: id }).then(res => {
          const shifts = res.data
          this.shifts = shifts
          return { data: shifts }
        })
      }
    }
  },
  computed: {
    columns () {
      let colums = [
        {
          title: this.$t('common.name'),
          dataIndex: 'name'
        },
        {
          title: this.$t('platformManagement.app.period'),
          key: 'times',
          scopedSlots: { customRender: 'times' }
        },
        {
          title: this.$t('platformManagement.app.planStopTime'),
          dataIndex: 'planTimeList',
          scopedSlots: { customRender: 'planTimeList' }
        }
      ]
      if (this.$auth('edit,delete', this.$route.meta.permissionId)) {
        colums = colums.concat({
          title: this.$t('common.action'),
          dataIndex: 'action',
          width: 150,
          scopedSlots: {
            customRender: 'action'
          },
          fixed: 'right'
        })
      }
      return colums
    }
  },
  created () {
    // getPlanTypes()
    //   .then(res => {
    //     const planTypes = res.data;
    //     this.$store.commit('SET_PLAN_TYPES', planTypes);
    //   });
    const planTypes = [{ id: 1, name: '休息' }]
  },
  methods: {
    handleShiftAdd () {
      this.$refs.shiftForm.add()
    },
    handleShiftEdit (record) {
      console.log(record)
      this.$refs.shiftForm.edit(record)
    },
    handleShiftAddOk () {
      this.$refs.table.refresh(true)
    },
    handleShiftDel (record) {
      this.$confirm({
        title: '删除班次',
        content: '确认需要删除该班次吗？删除后人员工作时间配置的该班次将同步删除！',
        onOk: () => {
          return deleteShift({ id: record.id }).then(res => {
            this.$message.success(res.message)
            this.$refs.table.refresh(true)
          })
        }
      })
    },
    handleShiftDelOk (record) {
      deleteShift({ id: record.id }).then(res => {
        this.$message.success(res.message)
        this.$refs.table.refresh(true)
      })
    },
    handePlanTypeEdit () {
      this.$refs.planTypeForm.edit()
    }
  }
}
</script>

<style></style>
